<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <!--页面公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" href="css/page.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <!--jquery必须放head，后续js需要使用-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!--页面js必须放head里，防止页面抖动-->
    <script src="js/jquery.pagination.min.js"></script>

    <script src="js/common.js"></script>

    <script src="js/idangerous.swiper.js"></script>
    <script src="js/idangerous.swiper.scrollbar-2.1.js"></script>
</head>
<body>



    <div class="swiper-container" style="width: 200px;height: 200px;text-align: justify; position: absolute; z-index: 10;top:0px;">
        <div class="swiper-scrollbar" style="width: 100%;height: 4px;height:0.1rem;	position: absolute;left: 0;	bottom: 5px;bottom:0.125rem;z-index: 1;"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="	width: 200px;width: 4rem;padding: 24px;padding: 0.6rem;	background: #fff;	box-sizing: border-box;font-size: 36px;font-size: 0.8rem;line-height: 55px;	line-height: 1.375rem;background: #f2f2f2;	text-indent:75px;text-indent:1.875rem;">
            春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在只是朱颜改。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在只是朱颜改。春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。春花秋月何时了，往事知多少。
            </div>
        </div>
    </div>



<script>
    var mySwiper = new Swiper('.swiper-container',{
        scrollContainer: true,
        scrollbar: {
            container: '.swiper-scrollbar'
        },
        mode: 'vertical'
    })

</script>

</body>
</html>
